<!-- src/components/TodoList.vue -->
<template>
    <div class="todo-container" v-if="todos.length > 0">
      <todo-header 
        :remaining-count="remainingCount"
        :completed-count="completedCount"
        :total-count="todos.length"
      />
      
      <todo-item
        v-for="(todo, index) in filteredTodos"
        :key="todo.id"
        :todo="todo"
        :index="index"
        @update:todo="updateTodo"
        @remove="removeTodo"
      />
      
      <todo-filters
        v-model="currentFilter"
        :remaining-count="remainingCount"
        :completed-count="completedCount"
        @clear-completed="$emit('clear-completed')"
      />
    </div>
    
    <empty-list v-else />
  </template>
  
  <script>
  import { computed, toRefs } from 'vue';
  import TodoHeader from './TodoHeader.vue';
  import TodoItem from './TodoItem.vue';
  import TodoFilters from './TodoFilters.vue';
  import EmptyList from './EmptyList.vue';
  
  export default {
    name: 'TodoList',
    components: {
      TodoHeader,
      TodoItem,
      TodoFilters,
      EmptyList
    },
    props: {
      todos: {
        type: Array,
        required: true
      },
      filter: {
        type: String,
        default: 'all'
      },
      filteredTodos: {
        type: Array,
        required: true
      },
      remainingCount: {
        type: Number,
        required: true
      },
      completedCount: {
        type: Number,
        required: true
      }
    },
    emits: ['update:filter', 'update:todo', 'remove-todo', 'clear-completed'],
    setup(props, { emit }) {
      const { filter } = toRefs(props);
      
      const currentFilter = computed({
        get: () => filter.value,
        set: (value) => {
          emit('update:filter', value);
        }
      });
  
      const updateTodo = (updatedTodo) => {
        emit('update:todo', updatedTodo);
      };
  
      const removeTodo = (index) => {
        emit('remove-todo', index);
      };
  
      return {
        currentFilter,
        updateTodo,
        removeTodo
      };
    }
  }
  </script>